<template>
    <h2>登录页面</h2>
    <table border="1" cellspacing="0" cellpadding="10">
        <tr>
            <td>用户名</td>
            <td><input type="text" v-model="List.username"></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" v-model="List.password"></td>
        </tr>
        <tr>
            <td colspan="2"><button @click="Login">登录</button></td>
        </tr>
    </table>
</template>

<script setup lang="ts">
//引入useRouter()
import {useRouter} from 'vue-router'
// 创建router实例
const router = useRouter()
// 引入ref
import { ref } from 'vue'
// 创建ref对象
const List = ref({
    username: '',
    password: ''
})
// 创建登录方法
const Login = () => {
    if (List.value.username=="") {
        alert('用户名不能为空')
        return
    }
    if (List.value.password=="") {
        alert('密码不能为空')
        return
    }
    console.log(List.value)
    console.log(List.value.username, List.value.password)
  
    // 登录逻辑
    // 假设登录成功后跳转到UserShow页面
    // 假设登录名和密码必须是admin 123
    if (List.value.username == 'admin' && List.value.password == '123') {
        // 登录成功后跳转到UserShow页面
        alert(List.value.username)
        alert(List.value.password)
        router.push({
            name: 'UserShow',
            params: {
                username: List.value.username,
                password: List.value.password
            }
        })
    }
    else {
        alert('登录名和密码必须是admin 123')
    }
}
</script>


